<template>
    <div class="container">
        <div class="top">
            <div class="t-left">院部新闻</div>
            <div class="t-right">查看更多</div>
        </div>
        <div class="center">
            <div class="c-left">
                <img src="../../assets/image/10.png" alt="">
            </div>
            <div class="c-right">
                <swiper class="swiper">
                    <swiper-slide>
                        <h1 class="text-ellipsis-1">马克思主义学院教师赴济南参加山东高校思想政治理论课2024年度第一场“萌新磨课会”</h1>
                        <span class="line">2024-05-09</span>
                        <p class="text-ellipsis-3">
                            "为进一步提升青年思政教师教学能力，增强思政课的思想性、理论性和亲和力，4月27日，马克思主义学院思政教师李丹、刘琳参加了山东高校思想政治理论课2024年度第一场“萌新磨课会”。本次会议是由山东省教育厅指导，由教育部高等学校思想政治理论课教指委“高职高专思想政治理论课”教学指导委员会、山东省学校思政课教学指导委员会、全国高校思政课“手拉手”集体备课中心（山东师范大学—山东省）、全国高校“思想道德与法治”教学创新中心（山东商业职业技术学院）、全国高校思想政治工作创新发展中心（山东商业职业技术学院）主办，山东省大中小学思政课一体化建设指导中心、济南职业学院和山东商业职业技术学院承办。来自北京师范大学、山东工商学院、河北师范大学、西北师范大学、黑龙江生态工程职业学院、内蒙古机电职业技术学院等省内外高校的专家，来自北京、湖南、安徽、河北、山东等9省的马克思主义学院负责人、思政课骨干教师和青年教师代表近300人参加活动。本次“萌新磨课会”开幕式上，山东省教育厅总督学王志刚参加并讲话，济南职业学院党委书记苏旭勇、山东商业职业技术学院党委书记张志东在开幕式上致辞。随后邀请的高校教授围绕如何更好地开展思政课分享了各自经验。随后，经专家匿名评审进入到本次萌新磨课会的21名青年思政课教师分别进行教学展示并由评委打分，每位选手进行12分钟精彩的课堂展示。最后，熊晓琳等6位专家就参赛教师的课程设计和教学展示作了全面的评价。通过观摩此次“萌新磨课会”，两位思政教师表示受益匪浅。通过聆听专家传授思政课先进的教学理念、观摩参赛选手的精彩教学展示，为自己的教学设计创新和突破提供了新的思路，学习到了新的思政教学经验。未来会根据在“萌新磨课会”上的所观所学，继续精益求精提升教学能力，打造具有魅力的思政课堂。"
                        </p>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
        <div class="bottom">
            <div class="item">
                <h1 class="text-ellipsis-2">马克思主义学院开展档案管理专题培训马克思主义学院开展档案管理专题培训马克思主义学院开展档案管理专题培训</h1>
                <span>2024-04-19</span>
            </div>
            <div class="item">
                <h1 class="text-ellipsis-2">增强安全意识，维护国家安全——马克思主义学院召开“4.15全民国家安全教育”专题会议</h1>
                <span>2024-04-19</span>
            </div>
            <div class="item">
                <h1 class="text-ellipsis-2">马克思主义学院开展档案管理专题培训马克思主义学院开展档案管理专题培训马克思主义学院开展档案管理专题培训</h1>
                <span>2024-04-19</span>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 30px auto;

    @media (max-width: 475px) {
        width: 90%;
    }

    .top {
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 40px;

        .t-left {
            width: 10%;
            color: #4587c1;
            font-weight: 500;
            font-size: 24px;
            line-height: 40px;

            @media (max-width: 475px) {
                width: 30%;
            }
        }

        .t-right {
            width: 10%;
            text-align: center;
            line-height: 40px;

            @media (max-width: 475px) {
                width: 30%;
            }
        }
    }

    .center {
        width: 100%;
        height: 300px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .c-left {
            width: 49%;
            height: 100%;

            @media (max-width: 475px) {
                width: 100%;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .c-right {
            padding: 20px;
            width: 49%;
            height: 100%;
            border: 2px solid #f6f6f6;

            @media (max-width: 475px) {
                width: 100%;
                margin: 20px 0;
                height: 80%;
            }

            .swiper {
                swiper-slide {
                    h1 {
                        font-size: 22px;
                        font-weight: bold;
                    }

                    .line {
                        margin: 10px 0 20px;
                        position: relative;
                        text-align: right;
                        width: 100%;
                        display: block;
                        font-size: 12px;
                        color: #005bca;
                        font-weight: normal;

                        &::before {
                            content: '————————————————————————';
                            color: #d8d8d8;
                            margin-right: 10px;
                            font-size: 20px;

                            @media (max-width:475px) {
                                content: '—————————————';
                            }
                            @media (max-width:375px) {
                                content: '—————————';
                            }
                        }
                    }

                    p {
                        font-size: 14px;
                        line-height: 24px;
                    }
                }
            }
        }
    }

    .bottom {
        @media (max-width: 475px) {
            margin-top: 300px;
        }

        margin: 20px 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
            @media (max-width: 475px) {
                width: 100%;
                margin: 8px 0;
                border: 2px solid #e2e2e2;
            }

            padding: 35px 20px;
            width: 32%;
            background-color: #fff;
            background-image: url(../../assets/bgimg.png);
            background-repeat: no-repeat;
            background-position: 130% -120%;
            border-radius: 10px;
            border: 2px solid #f6f6f6;

            &:hover {
                background-color: #abc9e5;

                span {
                    color: #065dad;
                }
            }

            h1 {
                font-size: 15.6px;
                margin-bottom: 10px;
                line-height: 38px;
                font-weight: inherit;
            }

            span {
                @media (max-width: 475px) {
                    text-align: left;
                    text-indent: 1.4em;
                    background-image: url(../../img/11.png);
                    background-repeat: no-repeat;
                    background-size: 16px;
                    background-position: 0 3px;
                }

                display: block;
                text-align: right;
                margin-top: 10px;
                color: #065dad;
            }
        }

    }
}
</style>